 <template>
    <div>
        <!-- <el-input v-model="yearMonth" @blur="search"/> -->
        
        <el-date-picker v-model="yearMonth" type="month" @change="search" placeholder="选择月"> </el-date-picker>
        <span class="demonstration">月</span>
        <div id="myChart" style="width: 600px; height: 400px"></div>
    </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xdata:[],
      coun:[],
      yearMonth:'2019-04'
     // showData:[]
    }
  },
  created(){
    this.loadData();
  },
  methods: {
       formatDate(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM 
      },
      loadData(){
          var _this=this;
          var ym =this.formatDate(this.yearMonth)
            console.log("日期为："+ym)
            this.xdata=[];
            this.coun=[];
            this.$http.get("http://192.168.1.72:9999/prs/menu/queryByClientLogin?yearMonth="+ym).then((response) => {
                        console.log(response.data)
                        var showData=response.data.data;
                        for(var i=0;i<showData.length;i++){
                            _this.xdata.push(showData[i].monthDay);
                                _this.coun.push(showData[i].coun);
                        }
                        console.log( _this.xdata+"...........")
                            this.drawLine();
                    })
      },
      //查询方法
      search(){
           this.loadData();
      },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
   //  var colors = ['#5793f3', '#d14a61', '#675bba'];
       var _this=this;
        console.log(this.xdata+"......3333333333");
       console.log(_this.xdata+"......222222222222");
     // 绘制图表
        myChart.setOption({
                title: {
                    text: '客户登录统计',
                    subtext: '完全真实'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['登录次数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:_this.xdata
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '登录次数',
                        type: 'line',
                        data: this.coun,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                   
                ]
            });
    }
  }
}
</script>
<style>
</style>